<template>
  <div class="newest-production-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">最新产品</h1>
      <div class="title-underline"></div>
      <p class="page-subtitle">Introducing our latest innovations</p>
    </div>

    <!-- 产品列表 -->
    <div class="product-list">
      <div
        v-for="(product, index) in products"
        :key="index"
        class="product-item fade-in-section"
        :class="{ 'is-visible': visibleItems[index] }"
      >
        <div class="product-content">
          <h2 class="product-title">{{ product.title }}</h2>
          <p class="product-description">{{ product.description }}</p>
          <div class="product-tags">
            <el-tag v-for="(tag, tagIndex) in product.tags" :key="tagIndex" size="small" type="info">
              {{ tag }}
            </el-tag>
          </div>
        </div>
        <div class="product-image">
          <img :src="product.image" alt="Product Image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewestProduction',
  data() {
    return {
      products: [
        {
          title: '智能安防监控系统',
          description: '基于深度学习的实时行为识别与异常检测系统，支持多摄像头联动分析，适用于车站、商场等大型公共场所。',
          tags: ['AI', '安防', '边缘计算'],
          image: require('@/assets/img/Liaoning.jpg')
        },
        {
          title: '多模态大模型平台',
          description: '融合视觉、语言与动作理解的通用模型，支持跨模态任务推理，提升智能决策能力。',
          tags: ['大模型', '多模态', 'AI'],
          image: require('@/assets/img/Liaoning.jpg')
        },
        {
          title: '人流密度热力图系统',
          description: '通过视频流实时生成人群密度热力图，辅助管理者优化空间布局与应急响应。',
          tags: ['数据分析', '可视化', '智能安防'],
          image: require('@/assets/img/Liaoning.jpg')
        }
      ],
      visibleItems: [] // 用于跟踪每个产品项的可见状态
    }
  },
  mounted() {
    // 初始化可见状态数组
    this.visibleItems = new Array(this.products.length).fill(false)

    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)

    // 初始检查可见性
    this.checkVisibility()
  },
  beforeDestroy() {
    // 移除滚动监听，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.checkVisibility()
    },
    checkVisibility() {
      // 获取所有产品项元素
      const elements = document.querySelectorAll('.fade-in-section')

      elements.forEach((el, index) => {
        // 获取元素位置信息
        const rect = el.getBoundingClientRect()
        // 视口高度
        const windowHeight = window.innerHeight

        // 当元素顶部进入视口底部100px时触发显示
        if (rect.top < windowHeight - 100) {
          this.$set(this.visibleItems, index, true)
        }
      })
    }
  }
}
</script>

<style scoped>
.newest-production-page {
  padding: 20px 20px;
  background-color: #f5f7fa;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #6a11cb;
  margin-bottom: 10px;
  margin-top: 0;
}

.title-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00c9ff, #92fe9d);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #6a11cb;
}

.product-list {
  max-width: 1200px;
  margin: 0 auto;
}

.product-item {
  display: flex;
  gap: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.product-content {
  flex: 1;
  padding: 30px;
}

.product-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.product-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-image {
  flex: 1;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 12px 12px 0;
}

/* 渐入动画样式 */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
</style>